<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:totoland="http://java.sun.com/jsf/composite/components">
    <h:head>

        <ui:include src="/template/headScript.xhtml"/>

    </h:head>
    <h:body>
        <h:form>
            <p:panel id="REPORT_001" header="#{msg.report_001_header}" >

                <p:panel id="REPORT_REPORT_001" header="#{formReport001Controller.reportTitle}">
                    <p:messages id="REPORT_001msgFrmDetails"></p:messages>
                    <p:panelGrid columns="4" styleClass="frmSelect">
                        <p:outputLabel value="#{msg.label_fiscal_year} :" rendered="false"/>
                        <p:selectOneMenu style="width: 180px;" rendered="false" disabled="#{formReport001Controller.paramMode=='view'}">
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="" /> 
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlFiscalYear()}"></f:selectItems>  
                        </p:selectOneMenu>  
                        <p:outputLabel value="เลือกเดือน : " rendered="false"/>
                        <p:selectOneMenu style="width: 180px;" rendered="false" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlMonth()}"></f:selectItems>
                        </p:selectOneMenu>  
                        <p:outputLabel value="เลือกประเภทรายงานผลการปฏิบัติการ : " rendered="false"/>
                        <p:selectOneMenu style="width: 180px;" rendered="false" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlReportOperating()}"></f:selectItems> 
                        </p:selectOneMenu>  
                        <p:outputLabel value="เลือกแบบรายงาน : " rendered="false"/>
                        <p:selectOneMenu style="width: 180px;" rendered="false" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="" />
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlReportForm()}"></f:selectItems>  
                        </p:selectOneMenu>  
                        <p:outputLabel value="เลือกยุทธศาสตร์ที่ : "/>
                        <p:selectOneMenu style="width: 220px;" id="REPORT_001strategicId" value="#{formReport001Controller.report001.strategicId}" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="-1" />
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" 
                                           value="#{formReport001Controller.dropdownFactory.ddlStrategic()}">
                            </f:selectItems>
                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" update="subStrategicId"/>  
                        </p:selectOneMenu>
                        <p:outputLabel value="เลือกกลยุทธ์ : " id="REPORT_001subStrategicId"/>
                        <p:selectOneMenu style="width: 220px;" id="subStrategicId" value="#{formReport001Controller.report001.subStrategicId}" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="-1" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlSubStrategic(formReport001Controller.report001.strategicId)}"></f:selectItems>
                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" update="REPORT_001planId"/>
                        </p:selectOneMenu>
                        <p:outputLabel value="เลือกแผนงาน : "/>
                        <p:selectOneMenu style="width: 220px;" id="REPORT_001planId" value="#{formReport001Controller.report001.planId}" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="-1" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlPlan(formReport001Controller.report001.subStrategicId)}"></f:selectItems>  
                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" update="REPORT_001projectId"/>
                        </p:selectOneMenu>
                        <p:outputLabel value="เลือกโครงการ : "/>
                        <p:selectOneMenu style="width: 220px;" id="REPORT_001projectId"  value="#{formReport001Controller.report001.projectId}" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="-1" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlProject(formReport001Controller.report001.planId)}"></f:selectItems> 
                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" update="REPORT_001Activity"/>
                        </p:selectOneMenu>
                        <p:outputLabel value="เลือกกิจกรรม : " />
                        <p:selectOneMenu style="width: 220px;" id="REPORT_001Activity" value="#{formReport001Controller.report001.activityId}" disabled="#{formReport001Controller.paramMode=='view'}">  
                            <f:selectItem itemLabel="#{msg.ddl_select}" itemValue="-1" />  
                            <f:selectItems itemLabel="#{item.name}" itemValue="#{item.value}" var="item" value="#{formReport001Controller.dropdownFactory.ddlActivity(formReport001Controller.report001.projectId)}"></f:selectItems> 
                        </p:selectOneMenu>
                        <p:outputLabel value=""/>
                        <p:outputLabel value=""/>                            
                    </p:panelGrid>


                    <p:panelGrid columns="2" styleClass="frmDetail" id="REPORT_001pnlFrm">
                        <f:facet name="header">
                            <div style="text-align: left">
                                <p:commandButton value="เพิ่มข้อมูล" id="REPORT_001_BT_ADD"  oncomplete="REPORT_001dlgAddReportDetail.show()" update="REPORT_001pn_addReportDetail" actionListener="#{formReport001Controller.initReportDetail()}" rendered="#{param.mode!='view'}"/>
                            </div>
                        </f:facet>       

                        <p:dataTable var="item" value="#{formReport001Controller.report001Details}" id="REPORT_001Grid" editable="true"
                                     paginator="true" rows="5" emptyMessage="#{msg.no_data_found}" style="width: 1200px"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowIndexVar="index"
                                     rowsPerPageTemplate="5">  

                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" event="rowEdit" listener="#{formReport001Controller.onEdit}"/>  
                            <p:ajax onstart="blogui001.show()" oncomplete="blogui001.hide()" event="rowEditCancel" listener="#{formReport001Controller.onCancel}"/>

                            <p:columnGroup type="header">  
                                <p:row>  
                                    <p:column rowspan="2" headerText="ลำดับ" />
                                    <p:column rowspan="2" headerText="รายละเอียดกิจกรรม" />  
                                    <p:column rowspan="1" colspan="3" headerText="เป้าหมาย" />
                                    <p:column rowspan="1" colspan="2" headerText="ตัวชี้วัดโครงการ/กิจกรรม" />
                                    <p:column rowspan="1" colspan="2" headerText="งบประมาณ" />
                                    <p:column rowspan="2" headerText="ร้อยละ" />
                                    <p:column rowspan="1" colspan="3" headerText="การบรรลุตัวชี้วัด" />
                                </p:row>  

                                <p:row>  
                                    <p:column headerText="หน่วยนับ" />  
                                    <p:column headerText="แผน" />
                                    <p:column headerText="ผล" />
                                    <p:column headerText="ตัวชี้วัด (แผน)" />
                                    <p:column headerText="ตัวชี้วัด (ผล)" />
                                    <p:column headerText="ตั้งไว้" />
                                    <p:column headerText="จ่ายจริง" />
                                    <p:column colspan="3" headerText="ผ่าน/ไม่ผ่าน" />
                                </p:row>
                            </p:columnGroup>

                            <p:column>
                                ${index+1} 
                            </p:column>

                            <p:column width="20">  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.workDetail}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <p:inputTextarea value="#{item.workDetail}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.goalType}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <p:inputText value="#{item.goalType}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.goalAmount}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <totoland:inputNumber value="#{item.goalAmount}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.goalResult}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <totoland:inputNumber value="#{item.goalResult}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.resultAmount}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <p:inputTextarea value="#{item.resultAmount}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.practiceResult}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <p:inputTextarea value="#{item.practiceResult}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.budgetSet}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <totoland:inputNumber value="#{item.budgetSet}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.budgetReal}" />  
                                    </f:facet>
                                    <f:facet name="input">  
                                        <totoland:inputNumber value="#{item.budgetReal}" />  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column> 
                                <h:outputText value="#{formReport001Controller.devide((item.budgetReal*100),item.budgetSet)}%" />
                            </p:column>

                            <p:column>  
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{item.isPass?'ผ่าน':'ไม่ผ่าน'}" />  
                                    </f:facet>
                                    <f:facet name="input">
                                        <h:selectOneRadio value="#{item.isPass}" style="border-style:none">  
                                            <f:selectItem itemLabel="ผ่าน" itemValue="true" />  
                                            <f:selectItem itemLabel="ไม่ผ่าน" itemValue="false" /> 
                                        </h:selectOneRadio>
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column style="width:50px" rendered="#{formReport001Controller.paramMode!='view'}">  
                                <p:rowEditor />  
                            </p:column>
                            <p:column rendered="#{formReport001Controller.paramMode!='view'}">  
                                <p:commandLink action="#{formReport001Controller.onDelete(item)}" update="REPORT_001Grid">
                                    <span class="ui-icon ui-icon-trash"></span>
                                    <p:confirm header="#{msg.confirmation_head}" message="#{msg.confirmation_message_delete}" icon="ui-icon-alert" />  
                                </p:commandLink>
                            </p:column>

                        </p:dataTable>
                        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">  
                            <p:commandButton value="#{msg.yes}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                            <p:commandButton value="#{msg.no}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
                        </p:confirmDialog>
                    </p:panelGrid>

                    <h:panelGroup id="REPORT_001pnlCmd" rendered="#{formReport001Controller.report001.flowStatusId!=200}">
                        <div align="center">
                            <p:commandButton value="#{msg.btn_save}" actionListener="#{formReport001Controller.save()}" id="REPORT_001btnSave" rendered="#{formReport001Controller.paramMode=='create'}"/>
                            <p:commandButton value="#{msg.btn_edit}" actionListener="#{formReport001Controller.goToEdit()}" id="REPORT_001btnEdit" rendered="#{formReport001Controller.paramMode=='view' 
                                                      and formReport001Controller.canEdit(formReport001Controller.report001.createdUserGroup,formReport001Controller.report001.reportStatus,formReport001Controller.report001.flowStatusId)}"/>
                            <p:commandButton value="#{msg.btn_close}" actionListener="#{formReport001Controller.goToClose()}" id="REPORT_001btnClose" rendered="#{formReport001Controller.paramMode=='view' || formReport001Controller.paramMode=='create'}"/>
                            <p:commandButton value="#{msg.btn_save}" actionListener="#{formReport001Controller.edit()}" id="REPORT_001btnSaveEdit" rendered="#{formReport001Controller.paramMode=='edit'}"/>
                            <p:commandButton value="#{msg.btn_cancel}" id="REPORT_001btnCancel" actionListener="#{formReport001Controller.goToCancel()}" rendered="#{formReport001Controller.paramMode=='edit'}"/>
                        </div>
                    </h:panelGroup>
                </p:panel>

                <p:dialog id="REPORT_001AddReportDetail" header="เพิ่มข้อมูล" widgetVar="REPORT_001dlgAddReportDetail" modal="true" draggable="true">
                    <p:panel style="height:400px;width: 650px;overflow: auto;">
                        <p:messages id="REPORT_001msgAddReportDetail" escape="false" closable="true"></p:messages>
                        <p:panelGrid columns="2" id="REPORT_001pn_addReportDetail">

                            <h:outputLabel value="รายละเอียดกิจกรรม *" />  
                            <p:inputTextarea id="REPORT_001lb1" style="width:400px" value="#{formReport001Controller.inputReport001Detail.workDetail}" />  

                            <h:outputLabel value="หน่วยนับ (เป้าหมาย) *" />  
                            <p:inputText id="REPORT_001lb2" style="width:400px" value="#{formReport001Controller.inputReport001Detail.goalType}" />  

                            <h:outputLabel value="แผน (เป้าหมาย)*" />  
                            <totoland:inputNumber id="REPORT_001lb3" style="width:400px" value="#{formReport001Controller.inputReport001Detail.goalAmount}" />  

                            <h:outputLabel value="ผล (เป้าหมาย)*" />  
                            <totoland:inputNumber id="REPORT_001lb3b" style="width:400px" value="#{formReport001Controller.inputReport001Detail.goalResult}" />  

                            <h:outputLabel value="ตัวชี้วัด (แผน) *" />  
                            <p:inputTextarea id="REPORT_001lb5" style="width:400px" value="#{formReport001Controller.inputReport001Detail.resultAmount}" /> 

                            <h:outputLabel value="ตัวชี้วัด (ผล) *" />  
                            <p:inputTextarea id="REPORT_001lb5b" style="width:400px" value="#{formReport001Controller.inputReport001Detail.practiceResult}" />  

                            <h:outputLabel value="งบประมาณตั้งไว้ *" />  
                            <totoland:inputNumber id="REPORT_001lb6" decimal="true" style="width:400px" value="#{formReport001Controller.inputReport001Detail.budgetSet}" /> 

                            <h:outputLabel value="งบประมาณจ่ายจริง *" />  
                            <totoland:inputNumber id="REPORT_001lb7" decimal="true" style="width:400px" value="#{formReport001Controller.inputReport001Detail.budgetReal}" />

                            <h:outputLabel value="การบรรลุตัวชี้วัด *" /> 
                            <p:selectOneRadio id="lb7" value="#{formReport001Controller.inputReport001Detail.isPass}" style="border-style:none">  
                                <f:selectItem itemLabel="ผ่าน" itemValue="true" />  
                                <f:selectItem itemLabel="ไม่ผ่าน" itemValue="false" /> 
                            </p:selectOneRadio>

                            <f:facet name="footer">  
                                <p:commandButton value="เพิ่ม" id="BT_ADD_REPORT_001" actionListener="#{formReport001Controller.addReportDetail(actionEvent)}" update="REPORT_001msgAddReportDetail,REPORT_001Grid" icon="ui-icon-check" style="margin:0"/>  
                            </f:facet>
                        </p:panelGrid>
                        <style>
                            .ui-panelgrid td {
                                border-color: inherit;
                                border-style: inherit;
                                border-width: 1px;
                                padding: 4px 10px;
                            }
                        </style>
                    </p:panel>
                    <p:blockUI  block="REPORT_REPORT_001" widgetVar="blogui001" trigger="BT_ADD_REPORT_001,REPORT_001_BT_ADD,REPORT_001btnSave,REPORT_001btnCancel">
                        LOADING<br />
                        <img src="${request.contextPath}/resources/images/preloader-01.gif"/>
                    </p:blockUI>
                </p:dialog>
            </p:panel>
        </h:form>
    </h:body>
</html>